<template>
	<view class="container" :style="{ 'background-image':  `url(${loginBgUrl})`}">
		<view class="tit">燃气安全云监测</view>
		<button  @click="getUserProfile" class="btn_getuserinfo" lang="zh_CN">请授权获取用户信息</button>
		<!-- <button v-else @getuserinfo="getuserinfo" class="btn_getuserinfo" open-type="getUserInfo" lang="zh_CN">请授权获取用户信息</button> -->
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	let vm;
	export default {
		data() {
			return {
				loginBgUrl:'https://6761-gas-monitor-01-16c3ed-1303022585.tcb.qcloud.la/gasAiot/loginBg.png',
			};
		},
		onShow() {
			vm = this
		},
		methods:{
			...mapActions('user', ['setUserInfo']),
			getuserinfo() {
				// 小程序获取用户昵称头像等信息
				uni.getUserInfo({
					lang:'zh_CN',
					success: res => {
						//console.log(res)
						vm.setUserInfo(res.userInfo);
						vm.getUserInfoFn(res.userInfo.nickName);
					}
				});
			},
			getUserProfile(){
				// 小程序获取用户昵称头像等信息
				uni.getUserProfile({
					lang:'zh_CN',
					desc:'获取用户昵称、头像信息',
					success: res => {
						
						vm.setUserInfo(res.userInfo);
						vm.getUserInfoFn(res.userInfo.nickName);
					}
				});
			},
			getUserInfoFn(userName) {
				// 接口获取用户信息
				vm.$api
					.getUserInfo({
						userName
					})
					.then(res => {
						//console.log(res)
						uni.setStorage({
							key: 'userInfoByApi',
							data: res.data,
							success() {
								uni.$emit('loginSuccess')
								// uni.navigateBack()
								uni.switchTab({
									url:'/pages/tabbar/user-center/user-center'
								})
							}
						});
					});
			},
		}
	}
</script>

<style lang="scss">
button{
	position: absolute;
	height: 76rpx;
	line-height: 76rpx;
	width: auto;
	left: 44rpx;
	right: 44rpx;
	bottom: 160rpx;
	background-color: #237be3;
	color: #fff;
	font-weight: 400;
}
.container{
	background-size:100% auto;
	background-repeat: no-repeat;
	background-position: center 10%;
	background-color: #fff;
	height: 100vh;
	.tit{
		position: absolute;
		font-size: 60rpx;
		color: #237be3;
		text-align: center;
		width: 100%;
		left: 0;
		top: 56%;
	}
}
</style>
